<template>
  <el-card>
    <el-form :inline="true">
      <el-form-item label="一级分类">
        <el-select
          style="width: 240px"
          v-model="c1Value"
          @change="selectC1"
          :disabled="props.disabled"
        >
          <el-option
            v-for="item in optionsC1"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select
          style="width: 240px"
          v-model="c2Value"
          @change="selectC2"
          :disabled="props.disabled"
        >
          <el-option
            v-for="item in optionsC2"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select
          style="width: 240px"
          v-model="c3Value"
          @change="selectC3"
          :disabled="props.disabled"
        >
          <el-option
            v-for="item in optionsC3"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { reqC1, reqC2, reqC3, reqCategoryList } from '@/api/product/attr'
import { ElMessage } from 'element-plus'
import type { AttrResponseData } from '@/api/product/type'

let c1Value = ref<number | string>('')
let optionsC1 = ref<any>([])
let c2Value = ref<number | string>('')
let optionsC2 = ref<any>([])
let c3Value = ref<number | string>('')
let optionsC3 = ref<any>([])
let tableData = ref([])

let props = defineProps(['disabled'])
let emits = defineEmits(['resetTable', 'handleChangeC3'])
defineExpose({
  selectC3: () => selectC3()
})

// 获取一级分类数据
const getC1Data = async () => {
  let res: AttrResponseData = await reqC1()
  if (res.code === 200) {
    optionsC1.value = res.data
  } else {
    ElMessage.error(res.message)
  }
}

// 一级分类change回调
const selectC1 = async () => {
  c2Value.value && ((c2Value.value = ''), (optionsC2.value = []))
  c3Value.value && ((c3Value.value = ''), (optionsC3.value = []))
  emits('resetTable', false)
  let res: AttrResponseData = await reqC2(c1Value.value)
  if (res.code === 200) {
    optionsC2.value = res.data
  } else {
    ElMessage.error(res.message)
  }
}

// 二级分类change回调
const selectC2 = async () => {
  c3Value.value && ((c3Value.value = ''), (optionsC3.value = []))
  emits('resetTable', false)
  let res: AttrResponseData = await reqC3(c2Value.value)
  if (res.code === 200) {
    optionsC3.value = res.data
  } else {
    ElMessage.error(res.message)
  }
}

// 三级分类change回调
const selectC3 = async () => {
  let res: any = await reqCategoryList(
    c1Value.value,
    c2Value.value,
    c3Value.value
  )
  if (res.code === 200) {
    tableData.value = res.data
  } else {
    ElMessage.error(res.message)
  }
  emits(
    'handleChangeC3',
    tableData.value,
    c1Value.value,
    c2Value.value,
    c3Value.value
  )
}

onMounted(() => {
  getC1Data()
})
</script>

<style scoped></style>
